<template>
    <div>
        <el-card class="el-card">
            <el-form :inline="true"  class="demo-form-inline">
                <el-form-item label="菜品名称搜索：">
                <el-input  placeholder="输入菜品名称" clearable />
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="table = true">>新增菜品</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="el-card">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="菜品名称" width="180" />
                <el-table-column prop="name" label="图片" width="180" />
                <el-table-column prop="address" label="菜品分类" />
                <el-table-column prop="address" label="售价" />
                <el-table-column prop="address" label="售卖状态" />
                <el-table-column prop="address" label="最近操作时间" />
                <el-table-column prop="address" label="操作" >
                    <template #="{row}">
                        <el-button type="primary" @click="editpermission(row)">修改</el-button>
                        <el-button type="danger" @click="deletepermission(row)">删除</el-button>
                        <el-button type="danger" @click="deletepermission(row)">启售</el-button>   
                        <el-button type="danger" @click="deletepermission(row)">停售</el-button>          
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页 -->
        <el-pagination
            class='pagination'
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
    </div>
    <!-- 新增菜品 -->
    <el-drawer
        v-model="table"
        title="新增菜品"
        direction="rtl"
        size="60%"
    >
    <el-form  label-width="120px">
        <el-form-item label="菜品名称">
        <el-input />
        </el-form-item>
        <el-form-item label="菜品分类">
        <el-input />
        </el-form-item>
        <el-form-item label="菜品价格">
        <el-input />
        </el-form-item>
        <el-form-item label="菜品图片">
            <el-image style="width: 100px; height: 100px" :src="url" :fit="fit" />
        </el-form-item>
        <el-form-item label="菜品描述">
        <el-input />
        </el-form-item>
    </el-form>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
// 新增弹出页面
const table = ref(false)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped>
.el-card{
    margin-bottom:10px;

}
.pagination{
    position: fixed;
    bottom:30px;
    right:5px;
}
</style>